<template>
  <div class="builManage">
    <div class="builBox">
      <el-form>
        <el-row class="buil-name">
          <el-col>
            楼宇名称：<el-input
              v-model="dimName"
              size="small"
              placeholder="请输入楼宇名称"
              style="width: 30%"
            />
            <el-button
              class="buil-btn"
              size="small"
              type="primary"
              @click="dimQuery"
            >查询</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-button
              class="add-buil"
              size="small"
              type="primary"
              @click="addBuil"
            >添加楼宇</el-button>
          </el-col>
        </el-row>
        <div class="table-buil">
          <el-table :data="buildata" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="80">
              <template slot-scope="scope">
                <div>
                  {{
                    (builPage.page - 1) * builPage.pageSize + 1 + scope.$index
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="楼宇名称" width="120px" />
            <el-table-column prop="floors" label="层数" width="150px" />
            <el-table-column prop="area" label="在管面积(m²)" width="150px" />
            <el-table-column prop="propertyFeePrice" label="物业费(元/m²)" width="150px" />
            <el-table-column prop="status" label="状态" width="100px">
              <template v-slot="{ row }">
                <span>{{ row.status === 1 ? "租赁中" : "空置中" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="propertyFeePrice" label="操作" align="center">
              <template v-slot="{row}">
                <el-button type="text" style="padding-right: 10px" @click="redactBuil(row.id)">编辑</el-button>
                <el-popconfirm title="确定删除吗？" @onConfirm="delBuil(row.id)">
                  <el-button slot="reference" type="text">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          :current-page="builPage.page"
          :page-count="builPage.pageSize"
          layout="->,total, prev, pager, next,jumper"
          :total="builPage.total"
          @current-change="changePage"
        />
      </el-form>
    </div>
    <!-- $添加楼宇弹出框 -->
    <el-dialog
      :title="nameBuil"
      :visible.sync="isBuilShow"
      width="40%"
      @close="closeBuil"
    >
      <el-form
        ref="builForm"
        :model="builForm"
        :rules="rules"
        label-position="top"
        size="mini"
      >
        <el-form-item label="楼宇名称" prop="name">
          <el-input v-model="builForm.name" size="mini" />
        </el-form-item>
        <el-form-item label="楼宇层数" prop="floors">
          <el-input v-model="builForm.floors" size="mini" />
        </el-form-item>
        <el-form-item label="在管面积" prop="area">
          <el-input v-model="builForm.area" size="mini">
            <template slot="append">m²</template>
          </el-input>
        </el-form-item>
        <el-form-item label="物业费" prop="propertyFeePrice">
          <el-input v-model="builForm.propertyFeePrice" size="mini">
            <template slot="append">元/m²</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col>
              <div style="text-align: center">
                <el-button size="medium" type="primary" @click="addConfirm">确认</el-button>
                <el-button size="medium" @click="closeBuil">取消</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getBuilDetails, addBuilDetails, delBuilDetails, redactBuil, revampBuil } from '@/api/parkManage'
export default {
  name: 'BuilManage',
  data() {
    return {
      isBUilID: null,
      nameBuil: '', // 弹出框名称
      isBuilShow: false, // 添加楼宇弹出框开关
      buildata: [], // 楼宇信息数据存放
      dimName: '', // 模糊查询名字
      builPage: {
        // 分页数据
        page: 1,
        pageSize: 10,
        total: null,
        name: '' // 模糊查询名字
      },
      builForm: {
        name: '', // 楼宇名称
        floors: null, // 层数
        area: null, // 在管面积
        propertyFeePrice: null // 物业费单价
      },
      rules: {
        name: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        floors: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 1, max: 2, message: '长度在 1 到 2 个字符', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        propertyFeePrice: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getBuilDetail()
  },
  methods: {
    async getBuilDetail() {
      const res = await getBuilDetails(this.builPage) // 获取楼宇列表
      this.builPage.total = res.data.total
      this.buildata = res.data.rows
    },
    changePage(page) { // 赋值当前页
      this.builPage.page = page
      this.getBuilDetail()
    },
    closeBuil() { // 退出模态框函数
      this.isBuilShow = false
      this.$refs.builForm.resetFields()
    },
    addBuil() { // 添加楼宇弹出框逻辑
      this.isBuilShow = true
      this.nameBuil = '添加楼宇'
    },
    addConfirm() { // 添加楼宇确认
      this.$refs.builForm.validate(async isOK => { // 表单验证通过条用添加接口
        if (isOK) {
          if (this.nameBuil === '添加楼宇') {
            await addBuilDetails(this.builForm)
            this.getBuilDetail() // 重新渲染
            this.closeBuil()// 关闭表单，清除数据
            this.$message.success('新增成功')
          } else if (this.nameBuil === '编辑楼宇') {
            delete this.builForm.createBy
            delete this.builForm.createTime
            delete this.builForm.delFlag
            delete this.builForm.remark
            delete this.builForm.status
            delete this.builForm.updateBy
            delete this.builForm.updateTime
            await revampBuil({ ...this.builForm, id: this.isBUilID })
            this.getBuilDetail() // 重新渲染
            this.closeBuil()// 关闭表单，清除数据
            this.$message.success('编辑成功')
          }
        }
      })
    },
    dimQuery() { // 模糊查询
      this.builPage.name = this.dimName
      this.getBuilDetail()
    },
    async delBuil(id) { // 删除楼宇
      await delBuilDetails(id)
      this.getBuilDetail()
      this.$message.success('删除成功')
    },
    async redactBuil(id) { // 编辑楼宇逻辑
      const res = await redactBuil(id) // 发起楼宇查询请求
      this.builForm = res.data // 赋值数据
      this.isBUilID = id
      this.isBuilShow = true
      this.nameBuil = '编辑楼宇'
    }
  }
}
</script>

<style lang="scss" scoped>
  .builManage {
    .builBox {
      padding: 10px;
      .buil-name {
        padding-bottom: 20px;
        border-bottom: 1px solid rgb(246, 234, 234);
      }
      .add-buil {
        margin-top: 15px;
      }
      .buil-btn {
        margin-left: 30px;
        border-radius: 7px;
      }
      .table-buil {
        height: 100%;
        background-color: aquamarine;
        margin-bottom: 30px;
      }
    }
  }
</style>
